<template>
  <div class="consumer-box" :style="{background: 'url('+bg+')'}">
    <div class="money">{{typeText}} {{amount}}.00 <span class="unit">元</span></div>
    <div class="time">有效期至{{time}}</div>
    <div class="tips">{{description}}</div>
    <span class="text">{{text}}</span>
  </div>
</template>

<script>
export default {
  name: "consumer",
  props: {
    obj: {
      type: Object,
      default: null,
    },
  },
  data () {
      return {
          typeText:'',
          time: '',
          amount:'',
          description:'',
          bg:'',
          text:''
      }
  },
  watch: {
    obj (val) {
      this.typeText = val.name;
      this.amount = (val.exchangeType=='2'?'100':val.amount);
      if(val.expireType=='3'){
        this.time = (val.expireValue).substring(0,10)
      }else{
         this.time = this.recentTime(val.expireValue,'yyyy-M-d',(val.createTime).substring(0,10));
      }
      this.bg = val.beforeGetPicUrl;
      this.description = val.description;
      this.text = val.beforeGetText;
    },
  },
  mounted() {
      this.typeText = this.obj.name;
      this.amount = (this.obj.exchangeType=='2'?'100':this.obj.amount);
      if(this.obj.expireType=='3'){
        this.time = (this.obj.expireValue).substring(0,10)
      }else{
         this.time = this.recentTime(this.obj.expireValue,'yyyy-M-d',(this.obj.createTime).substring(0,10));
      }
      this.bg = this.obj.beforeGetPicUrl;
      this.description = this.obj.description;
      this.text = this.obj.beforeGetText
  },
  methods:{
    recentTime(day,fmt,time){
    	//获取当前时间的毫秒值
    	let now = (time? new Date(time) :new Date()).getTime();
    	// 获取前后n天时间
    	let recent = new Date(now+day*24*60*60*1000)

    	// key：正则匹配表达式，value：对应的时间、日期
    	let fmtObj = {
    		'M+': recent.getMonth()+1, 		//月份
    		'd+': recent.getDate(),  		//日
    		'h+': recent.getHours(), 		//时
    		'm+': recent.getMinutes(),		//分
    		's+': recent.getSeconds(),		//秒
    	}
    	// 获取匹配年份替换
    	if(/(y+)/.test(fmt)){
    		//RegExp.$1 匹配结果，替换成对应的长度。如：yyyy就替换成整个年份2021，yy就替换成后两位21，以此类推
    		fmt = fmt.replace(RegExp.$1,(recent.getFullYear()+'').substr(4-RegExp.$1.length))
    	}
    	for(let key in fmtObj){
    		if(new RegExp(`(${key})`).test(fmt)){
    			//日期，时、分、秒替换，判断fmt是否需要补0，如：yyyy-M-d h:m:s 不补0,yyyy-MM-dd hh:mm:ss 则自动补0
    			fmt = fmt.replace(RegExp.$1,RegExp.$1.length==1 ? fmtObj[key] : ('00'+fmtObj[key]).substr((''+fmtObj[key]).length))
    		}
    	}
    	return fmt
    }
  }
};
</script>
<style scoped>
  .consumer-box{
    height: 150px;
    width: 363px;
    background-size: cover!important;
    margin: auto;
    text-align: left;
    padding:33px 0 0 28px;
    position: relative;
  }
  .text{
    position: absolute;
    right: 29px;
    top: 30px;
    height: 150px;
    font-size: 20px;
    width: 30px;
    line-height: 25px;
    color: #fff;
  }
  .money{
    font-size: 28px;
    color: #fff;
    text-align: left;

  }
  .unit{
    font-size: 20px;
  }
  .time{
        font-size: 12px;
        padding: 0px 5px;

        line-height: 20px;
        background-color: #FFFFFF;
        color: #FB3934;
        border-radius: 5px;
        margin: 30px 0px 15px 2px;
        display: inline-block;
  }
  .tips{
    width: 220px;
    font-size: 12px;
    color:#fff;
    text-align: center;

  }
</style>
